<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '新增学生信息' : '编辑学生信息'" append-to-body width="700px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px" append-to-body>
            <el-form-item label="账号" prop="stuId">
                <el-input v-model="form.stuId" style="width: 224px;" placeholder="请输入账号" @change="toStuId()" maxlength="20" clearable/>
            </el-form-item>

            <el-form-item label="性别" prop="sex">
                <el-radio v-model="form.sex" :label="0">男</el-radio>
                <el-radio v-model="form.sex" :label="1">女</el-radio>
            </el-form-item>

            

            <el-form-item label="姓名" prop="stuName">
                <el-input v-model="form.stuName" style="width: 224px;" placeholder="请输入姓名" maxlength="16" minlength="6" clearable/>
            </el-form-item>

            <el-form-item label="转校生" prop="isTransfer">
                <el-radio v-model="form.isTransfer" :label="1">否</el-radio>
                <el-radio v-model="form.isTransfer" :label="0">是</el-radio>                
            </el-form-item>


            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile" style="width: 224px;" placeholder="请输入手机号" maxlength="11" clearable/>
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-radio v-model="form.status" :label="0">启用</el-radio>
                <el-radio v-model="form.status" :label="1">禁用</el-radio>
            </el-form-item>    

            <el-form-item label="密码" prop="password" v-if="this.show" >
                <el-input v-model="form.password" style="width: 224px;" show-password placeholder="请输入6-18位密码" maxlength="18" clearable/>
            </el-form-item>                

            <el-form-item label="身份证号" prop="cardId">
                <el-input v-model="form.cardId" style="width: 505px;" placeholder="请输入身份证号"  maxlength="18" clearable/>
            </el-form-item>

           

            <!-- <el-form-item label="所属角色" prop="roleIds">
                <el-select v-model="form.roleIds" clearable multiple :multiple-limit="2" filterable placeholder="请选择" style="width: 505px;">
                    <el-option
                        v-for="item in roles"
                        :key="item.id"
                        :label="item.roleName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item> -->

            <!-- <el-form-item label="所在地区" prop="areaCode">
                <al-cascader v-model="form.areaCode" level="2" style="width: 505px;" id="areaCode"/>
            </el-form-item> -->
            
           <!--  <el-form-item label="所属学校" prop="schId">
                <el-select v-model="form.schId" clearable  filterable placeholder="请选择所属学校" style="width: 505px;" >
                    <el-option
                        v-for="item in schIds"
                        :key="item.schId"
                        :label="item.schName"
                        :value="item.schId">
                    </el-option>
                </el-select>
            </el-form-item> -->

            <el-form-item label="所属学校" prop="schName" v-if="!this.show">
                <el-input v-model="form.schName" style="width: 505px;"  maxlength="40" readonly/>
            </el-form-item>


            <el-form-item label="家长姓名" prop="parentName">
                <el-input v-model="form.parentName" style="width: 224px;" placeholder="请输入家长姓名" maxlength="15" clearable/>
            </el-form-item>

            <el-form-item label="家长手机" prop="parentMobile" >
                <el-input v-model="form.parentMobile" style="width: 178px;" placeholder="请输入家长手机号" maxlength="11" clearable/>
            </el-form-item>

            <el-form-item label="家庭地址" prop="familyAddress" >
                <el-input v-model="form.familyAddress" style="width: 505px;" placeholder="请输入家庭详细地址"  maxlength="30"clearable/>
            </el-form-item>

            <el-form-item label="学生简介">
                <el-input v-model="form.remark" style="width: 505px;" rows="4" type="textarea" maxlength="100"  clearable show-word-limit />
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit" :disabled="this.disabled">确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { StuSave, getRoles } from '@/api/request'
import { valitoStuId } from '@/api/data'
import { validateUserId, validatPass, validatePhone, validateEmpty, validateIdNo, debounce } from '@/utils/validate'
export default {
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
        schIds:{
           type: Array,
           required: true 
        },
    },
    data() {
        const validatestuId = (rule, value, callback) => {
            if (value.trim().length < 1) {
                callback(new Error('用户账号不能为空'))
            } 
            if (!validateUserId(value)) {
                callback(new Error('以字母开头,只能输入数字、字母、下划线'))
            } 
            else {
                callback()
            }
        };
        const validatepassword = (rule, value, callback) => {
            if (value.trim().length < 1) {
                callback(new Error('密码不能为空'))
            } 
            if (!validatPass(value)) {
                callback(new Error('数字,字母,大小写,特殊字符至少有两种'))
            } 
            else {
                callback()
            }
        };
        return {
            show:true,
            disabled:true,
            loading: false, dialog: false, permissions: [],
            form: { 
                id:'',
                stuId: '',
                password: '',
                stuName:'',
                schName:'',
                sex: 0, 
                mobile:'',
                // areaCode:[],
                areaCode:'',
                familyAddress:'',
                isTransfer:1, 
                userType:'2',
                status: 0,
                cardId:'',
                remark:'',
                parentMobile:'',
                parentName:''
            },
            rules: {
                stuId: [
                    { required: true, trigger: 'blur',validator: validatestuId,},
                    {
                        min: 4,
                        max: 20,
                        message: '账号长度在4到20位',
                        trigger: 'blur',
                    }
                ],
                password: [
                    { required: true, trigger: 'blur',validator: validatepassword,},
                    {
                        min: 6,
                        max: 18,
                        message: '密码长度为6-18位',
                        trigger: 'blur',
                    }
                ],
                // cardId: [
                //     { required: true, trigger: 'blur',message: '请输入18位中国大陆地区身份证号',min: 18,max: 18,},
                //     {                       
                //         validator: validateIdNo,
                //         trigger: 'blur',
                //     }
                // ],
                stuName:[
                    { required: true, trigger: 'blur',min: 2,max: 16,
                        message: '姓名长度在 2 到 16个字符'},
                    {validator:validateEmpty,trigger: 'blur',} 
                ],
                mobile:[
                    { required: true, trigger: 'blur',message: '手机号不能为空', },
                    {validator:validatePhone,trigger: 'blur',}
                ],
                parentName:[
                    { required: true, trigger: 'blur',message: '请输入家长姓名',min: 2,max: 16,},
                    {validator:validateEmpty,trigger: 'blur',}
                ],
                parentMobile:[
                    { required: true, trigger: 'blur',message: '家长手机号格式错误', },
                    {validator:validatePhone,trigger: 'blur'}
                ],
                // schId:[
                //     { required: true, trigger: 'blur',message: '请输请选所属学校'},
                // ],

            },
        }
    },
    methods: {
        cancel(){
            this.dialog  = false
        },
        doSubmit:debounce(function(){
            this.form.stuId = this.form.stuId.trim()
            this.form.stuName = this.form.stuName.trim()
            // this.form.password = this.form.password.trim()
            this.$refs['form'].validate((valid) => {
                if (valid){
                    StuSave(this.form).then(res => { 
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 2500
                        })
                        this.dialog = false
                        this.$parent.init()
                    })
                }else {
                    return false
                }
                
            })
            
        }, 500),
        toStuId(){
            this.form.stuId = this.form.stuId.trim()
            if (this.form.stuId) {
                valitoStuId(this.form.stuId).then(res => {
                        if (res.data === false) {
                            this.disabled = true
                            this.$message({
                                message: '用户账号已存在',
                                type: 'error'
                            });
                        }else{
                            this.disabled = false
                        }
                })
            }else{
                this.disabled = true
                return
            }
        },      
       
        
    }
}
</script>

<style>
/*提升样式层级*/
.ivu-select-dropdown, .ivu-cascader-transfer{
    z-index: 3000 !important;
}
.ivu-cascader .ivu-input {
    font-size: 13px;
    padding-left: 15px;
}
</style>

<style scoped lang="scss">
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    display: inline-block;
}
</style>